<template>
  <div
    :class="className"
    ref="LineChart"
    :style="{ height: height, width: width }"
  />
</template>

<script>
import * as echarts from "echarts";
import {
  onBeforeUnmount,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
} from "vue";
import { debounce } from "@/utils/debounce";

export default {
  name: "LineChart",
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
  },

  setup(props) {

    const LineChart = ref(null);
    let myChart = null;
    const resizeHandler = debounce(() => {
      if (myChart) {
        myChart.resize();
      }
    }, 200);
    onMounted(() => {
      initEcharts();
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.addEventListener("resize", resizeHandler);
    });
    watch(
      () => props.chartData,
      (nv, ov) => {

        initEcharts();
      }
    );

    // watch: {
    //   chartData: {
    //     deep: true,
    //     handler(val) {
    //       this.setOptions(val);
    //     },
    //   },
    // },

    //渲染echarts图
    const initEcharts = () => {
      const colorList = ["#FF9E8C", "#00D2C9"];
      myChart = echarts.init(LineChart.value);

      myChart.setOption({
        xAxis: {
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          boundaryGap: false,
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          padding: [5, 10],
        },
        yAxis: {
          axisTick: {
            show: false,
          },
        },
        legend: {
          data: ["expected", "actual"],
        },
        series: [
          {
            name: "expected",
            itemStyle: {
              normal: {
                color: "#FF005A",
                lineStyle: {
                  color: "#FF005A",
                  width: 2,
                },
              },
            },
            smooth: true,
            type: "line",
            data: props.chartData.expectedData,
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
          {
            name: "actual",
            smooth: true,
            type: "line",
            itemStyle: {
              normal: {
                color: "#3888fa",
                lineStyle: {
                  color: "#3888fa",
                  width: 2,
                },
                areaStyle: {
                  color: "#f3f8ff",
                },
              },
            },
            data: props.chartData.actualData,
            animationDuration: 2800,
            animationEasing: "quadraticOut",
          },
        ],
      });
    };

    return {
      LineChart,
    };
  },

  // data() {
  //   return {
  //     chart: null,
  //   };
  // },
  // watch: {
  //   chartData: {
  //     deep: true,
  //     handler(val) {
  //       this.setOptions(val);
  //     },
  //   },
  // },
  // mounted() {
  //   this.$nextTick(() => {
  //     this.initChart();
  //   });
  // },
  // beforeDestroy() {
  //   if (!this.chart) {
  //     return;
  //   }
  //   this.chart.dispose();
  //   this.chart = null;
  // },
  // methods: {
  //   initChart() {
  //     this.chart = echarts.init(this.$el, "macarons");
  //     this.setOptions(this.chartData);
  //   },
  //   setOptions({ expectedData, actualData } = {}) {
  //     this.chart.setOption(
  //         {
  //       xAxis: {
  //         data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  //         boundaryGap: false,
  //         axisTick: {
  //           show: false,
  //         },
  //       },
  //       grid: {
  //         left: 10,
  //         right: 10,
  //         bottom: 20,
  //         top: 30,
  //         containLabel: true,
  //       },
  //       tooltip: {
  //         trigger: "axis",
  //         axisPointer: {
  //           type: "cross",
  //         },
  //         padding: [5, 10],
  //       },
  //       yAxis: {
  //         axisTick: {
  //           show: false,
  //         },
  //       },
  //       legend: {
  //         data: ["expected", "actual"],
  //       },
  //       series: [
  //         {
  //           name: "expected",
  //           itemStyle: {
  //             normal: {
  //               color: "#FF005A",
  //               lineStyle: {
  //                 color: "#FF005A",
  //                 width: 2,
  //               },
  //             },
  //           },
  //           smooth: true,
  //           type: "line",
  //           data: expectedData,
  //           animationDuration: 2800,
  //           animationEasing: "cubicInOut",
  //         },
  //         {
  //           name: "actual",
  //           smooth: true,
  //           type: "line",
  //           itemStyle: {
  //             normal: {
  //               color: "#3888fa",
  //               lineStyle: {
  //                 color: "#3888fa",
  //                 width: 2,
  //               },
  //               areaStyle: {
  //                 color: "#f3f8ff",
  //               },
  //             },
  //           },
  //           data: actualData,
  //           animationDuration: 2800,
  //           animationEasing: "quadraticOut",
  //         },
  //       ],
  //     }
  //     );
  //   },
  // },
};
</script>
